<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" label-width="" class="el-form">
      <!-- {{ menuList }} -->
      <!-- {{ menuValue }} 11111111-->
      <!-- 000 -->
      <div class="disp-from-flxe">
        <el-form-item label="">
          <el-select
            @change="menuChange"
            v-model="menuValue"
            multiple
            filterable
            placeholder="请选择"
            reserve-keyword
            remote
            :remote-method="remoteMethod"
          >
            <el-option
              v-for="item in menuArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="set_meal">
        <el-card
          class="box-card-taocan"
          v-for="(item, index) in tableDataMenuSelect"
          :key="index"
        >
          <div slot="header" class="clearfix">
            {{ item.name }}
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="appendFun(item, index)"
              >追加</el-button
            >
          </div>
          <el-table
            ref="multipleTable"
            :data="item.details"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="500"
          >
            <el-table-column label="名称">
              <template slot-scope="scope"
                >{{ scope.row.typeName }}
                <!-- - {{ scope.row.menu_id }} -->
              </template>
            </el-table-column>
            <el-table-column label="单位">
              <template slot-scope="scope">{{ scope.row.brandName }}</template>
            </el-table-column>
            <el-table-column label="规格">
              <template slot-scope="scope">{{ scope.row.specName }}</template>
            </el-table-column>
            <el-table-column label="数量" width="220">
              <template slot-scope="scope">
                <el-input-number
                  @change="(e) => cheNum(e, scope)"
                  v-model="scope.row.num"
                  :min="0"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="备注" width="220">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('cancel')">关闭</el-button>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>

    <el-dialog
      title="追加单品"
      :visible.sync="appDan.open"
      width="30%"
      append-to-body
      class="universal-from"
    >
      <el-form ref="form" :model="form" label-width="" class="el-form">
        <div class="disp-from-flxe">
          <el-form-item label="">
            <!--  -->

            <!-- {{appDan.val}} -->
            <el-select
              @change="appChange"
              v-model="appDan.val"
              filterable
              placeholder="请选择"
              reserve-keyword
              remote
              :remote-method="appRemoteMethod"
            >
              <el-option
                v-for="item in appDan.menuArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="disp-from-flxe">
          <el-form-item label="">
            <el-input-number @change="cheNumDan" :min="0" v-model="appDan.data.num">
            </el-input-number>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="appDan.open = false">关闭</el-button>
        <el-button type="primary" @click="submitDan">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { getFormaMenus, listMenuDose } from "@/api/system/menus";
import { getFormaType, getType } from "@/api/system/type";
import { addDose } from "@/api/system/dose_manage";

export default {
  name: "checMenu",
  props: {
    typeArr: {
      type: Array,
      default: () => [],
    },
    checObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: true,
      menuArr: [],
      menuValue: [], //选项id
      form: {},
      tableDataMenuSelect: [],
      appDan: {
        val: "",
        open: false,
        menuArr: [],
        index: 0,
        data:{
          num:0,
          typeName:'',
          id:''
        }
      },
    };
  },
  created() {
    console.log(this.checObj)
    this.tableDataMenuSelect = this.checObj.tableDataMenuSelect
    this.menuValue = this.checObj.val
    // console.log(this.menuValue)
    this.checObj.tableDataMenuSelect
    this.menuArr.push(...this.checObj.tableDataMenuSelect)
    this.show();
  },
  methods: {
    appChange(e) {
      console.log(e);
      getType(e).then((response) => {
        this.appDan.data = response.data
        this.appDan.data.num = 0
        this.appDan.data.typeName = response.data.name
        this.appDan.data.typeId = response.data.id
        console.log(this.appDan.data)
      });
    },
    cheNum(e, scope) {
      if (e == undefined) {
        scope.row.num = 0;
      }
    },
    cheNumDan(e) {
      if (e == undefined) {
        this.appDan.val = 0;
      }
    },
    //单品选择确认
    submitDan() {
      this.tableDataMenuSelect[this.appDan.index].details.push(this.appDan.data)
      this.appDan.open = false;
      this.appDan.data = {}
    },
    //追加单品
    appendFun(item, index) {
      this.appDan.open = true;
      this.appDan.val = "";
      this.appDan.index = index;
    },
    //加载选择菜谱
    show() {
      this.loading = false;
    },
    //选择单品下拉框
    appRemoteMethod(query) {
      console.log(query);
      if (query !== "") {
        getFormaType({
          name: query,
          pageNum: -1,
          pageSize: -1,
        }).then((response) => {
          // console.log(response.rows)
          this.appDan.menuArr = response.rows;
        });
      } else {
      }
    },
    //菜谱下拉框
    remoteMethod(query) {
      console.log(query);
      if (query !== "") {
        listMenuDose({
          name: query,
          pageNum: -1,
          pageSize: -1,
        }).then((response) => {
          // console.log(response.rows)
          this.menuArr = response.rows;
        });
      } else {
      }
    },
    //监听选项
    menuChange(val) {
      // console.log(val);
      let menu = JSON.stringify(this.menuArr);
      let tableDataMenuArr = JSON.stringify(this.tableDataMenuSelect);
      // console.log(JSON.parse(tableDataMenuArr))
      if (val.length <= 0) {
        this.tableDataMenuSelect = [];
        return;
      }
      let arr = [];
      if (this.tableDataMenuSelect.length > 0) {
        // 此时说明已经有选中的了
        this.tableDataMenuSelect.forEach((item, index) => {
            item.id = item.id;
            if (item.id == undefined) {
              item.id = item.detail[0].id;
            }
          if (val.indexOf(item.id) > -1) {
            arr.push(item);
          }
        });
      }
      // console.log(arr)
      this.tableDataMenuSelect = arr;
      tableDataMenuArr = JSON.parse(tableDataMenuArr);

      JSON.parse(menu).forEach((item) => {
        // console.log(item)
        let list = val.filter((e) => e == item.id);
        let list2 = this.tableDataMenuSelect.filter((e) => e.id == item.id);

        if (list.length > 0 && list2 <= 0) {
          // console.log(item)
          let hTem = Object.assign({}, item);
          this.tableDataMenuSelect.push(hTem);
        }
      });
      console.log(this.tableDataMenuSelect);
    },
    submitFileForm(){
      if (this.tableDataMenuSelect.length < 1) {
        this.$modal.msg("请选择菜谱");
        return
      }
      var data = {
        weekStart:this.checObj.weekStart,
        weekEnd:this.checObj.weekEnd,
        week:this.checObj.week,
        weekTag:this.checObj.weekTag,
        params:{
          doseDetails:[]
        }
      }
      var arr = []
      this.tableDataMenuSelect.forEach((item,index)=>{

        item.details.forEach((item2,index2)=>{
          item2.menuId = item.id
          item2.time = this.checObj.type
          arr.push(item2)
        })
      })
      data.params.doseDetails = arr
      console.log(data)
      // this.loading = true
     
      addDose(data).then((response)=>{
        console.log(response)
        // this.loading = false
        this.$emit('submitFileForm')
      })
    }
  },
};
</script>
          
  
  <style scoped>
.app-container {
  padding: 0;
}

.box-card-taocan {
  margin-bottom: 20px;
}
</style>